﻿<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<umbPackage>
	<files>
        <file>
         <guid>Eksponent.CropUp.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Eksponent.CropUp.dll</orgName> <!-- Name of the deployed file -->
        </file>
        <file>
         <guid>Eksponent.CropUp.UmbracoIV.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Eksponent.CropUp.UmbracoIV.dll</orgName> <!-- Name of the deployed file -->
        </file>
        <file>
         <guid>ImageResizer.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>ImageResizer.dll</orgName> <!-- Name of the deployed file -->
        </file>
        <file>
         <guid>ImageResizer.xml</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>ImageResizer.xml</orgName> <!-- Name of the deployed file -->
        </file>
		
		<file>
         <guid>Accord.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>Accord.Imaging.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.Imaging.dll</orgName> <!-- Name of the deployed file -->
        </file>		
		<file>
         <guid>Accord.MachineLearning.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.MachineLearning.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>Accord.Math.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.Math.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>Accord.Statistics.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.Statistics.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>Accord.Vision.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Accord.Vision.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>AForge.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>AForge.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>AForge.Imaging.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>AForge.Imaging.dll</orgName> <!-- Name of the deployed file -->
        </file>
		<file>
         <guid>AForge.Math.dll</guid> <!-- Name of the file in the package -->
          <orgPath>/bin</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>AForge.Math.dll</orgName> <!-- Name of the deployed file -->
        </file>
			
        <file>
         <guid>Eksponent.CropUp.config</guid> <!-- Name of the file in the package -->
          <orgPath>/config</orgPath> <!-- Path to deploy to, non existing directories will be created for you -->
          <orgName>Eksponent.CropUp.config</orgName> <!-- Name of the deployed file -->
        </file>        
    </files>
	<info>
		<package>
			<name>Eksponent CropUp</name>
			<version>1.0.0β3</version>
			<license url="http://opensource.org/licenses/LGPL-3.0">LGPL license</license>
			<url>http://cropup.codeplex.com</url>
			<requirements>
				<major>0</major>
				<minor>0</minor>
				<patch>0</patch>
			</requirements>
		</package>
		<author>
			<name>Niels Kühnel, Eksponent (@nielskuhnel)</name>
			<website>http://www.eksponent.com</website>
		</author>
		<readme><![CDATA[# Eksponent CropUp #

Eksponent CropUp introduces a new concept for "One Crop Suits It All".

CropUp is a simple geometric algorithm for "weighted auto cropping". A gravity point and optional "area of interest" are defined (e.g. a face in a group pictures). These will always be shown in the cropped image not matter size.

It assumes that the editor, if possible, wants to show the entire image uploaded but that's rarely possible. Thus, it's not an online image editor.

[ImageResizer.NET](http://imageresizing.net/) is used for resizing

## Configuration ##
The configuration consists of two parts: *Roots*, and *croppings*.

### Croppings ###
The main idea with CropUp is that the editor doesn't have to define a crop area for every format you show on the webpage.
However, it is possible to define croppings, and it's a good idea as it allows the editor to:
1. See how the image will appear in different format
2. Manually override one or more of the formats if the the general focus point should be overriden.

    <cropUp referenceWidth="620" referenceHeight="480">
        <croppings>
            <add alias="thumb" name="Thumbnail" width="100" height="100" />
            <add alias="portrait" name="Portrait" width="320" height="400" />
            <add alias="banner" name="Banner" width="620" height="140" />
        </croppings>
    </cropUp>

*referenceWidth* and *referenceHeight* is used to treat very large and rather small uploaded source images identically.

They control when to crop and when to scale down. The default values are normally great, but if you feel like changing them they should reflect the largest images you normally show in your layout. 

## Usage ##


### .NET/Razor ###

Use CropUp.GetImageUrl

    @CropUp.GetImageUrl("~/media/1337/AngryDuck.png", new ImageSizeArguments { Width = 200})
    
The first parameter is the virtual location of the image. Remember to prefix with tilde (~) when using the umbracoFile property of images.
The second parameter controls how to size the image. 

* _Width_ and _Height_ are optional, and missing parameters will adjust to the image's aspect ratio.

* _CropAlias_ can be used to show one of the predefined croppings from the configuration. If not specified width and height from the configuration is used.

* CropMode specifies how to adjust the image. The following values are possible:
    * *BestFit* (default). CropUp is used, and the image will be scaled and/or cropped according to the editor's settings
    * *Max* The Width and Height parameters are max values. This means that the produced image will never exceed any of those. The lesser dimension will be adjusted to keep the image's aspect ratio.
    * *Pad* The entire image will always be shown, and white padding is added to produce an image with the dimensions specified
    
### XSLT ###

In Xslt you have four extension methods:

* _Eksponent.CropUp:Url(path, args)_. Same as the .NET counterpart above.
* _Eksponent.CropUp:UrlByMediaId(media id, args)_. Instead of path a media ID is specified. Normally you will probably use this. Note however, that it uses new Media(...) so if you're up for Examine enhanced media resolving you should use the other method somehow.

* _Responsive(path, args, cssClass, style, id)_ args specify the dimensions of the server generated image. 
   Add "Z" to enable zooming. ("300x200Z", "Z", etc.).
   Also to use progressive download (i.e. larger versions of the image are downloaded when needed) write either "server" or "progressive200"

* _Responsive(mediaId, args, cssClass, style, id)_ same as above but with an media ID instead.


_args_ is a string that specifies how to present the image.     

#### Examples ####
* "300x300" gives an image 300px x 300px
* "-x300" gives an image 300px high with width scaled to proportions
* "300x-" gives an image 300px wide with height scaled to proportions
* "banner" gives an image using the predefined banner cropping from the config file
* "300x500M" gives an image that is at most 300 px wide and/or 500 px high. It corresponds to the _CropUpMode.Max_ setting. "P" is _CropUpMode.Pad_
* Add "Z" to allow upscaling, e.g. "2000x500Z"
* "-" Do nothing. Show the source image.

This is the general format

    (((?<Width>(\-|[0-9]+))x(?<Height>(\-|[0-9]+)))?(?<Alias>[a-z]+)?(?<CropMode>[A-Y])?(?<Zoom>Z)?)


So to create a 300x300 image from a property called listImage on the current node, you would write

    <img>
        <xsl:attribute name="src">
          <xsl:value-of select="cropup:UrlByMediaId($currentPage/listImage, '300x300')" />        
        </xsl:attribute>   
    </img>    


### JavaScript ###

Include jQuery and the CropUp.js script.
Then you can write
<img src="/Content/Lighthouse.jpg" class="crop-up"
             style="width: 100%; height: 300px;"
             data-gravity=".2,.2"             
             data-zoom="true"
            />
and the algorithm will run client side.

    

## Performance/Caching ##
ImageResizer.NET is used to generate images. If ImageResizer.NET disk cache plugin is not installed memory will be used. That is fine for smaller solutions but consider purchasing the "Performance Bundle" from http://imageresizing.net/plugins/bundles/1 for larger solutions to enable disk caching ($99. CropUp is not affiliated with ImageResizer.NET).
]]></readme>
	</info>
	<DocumentTypes />
	<Templates />
	<Stylesheets />
	<Macros />
	<DictionaryItems />
	<Languages />
	<DataTypes />
	<Actions>
		<Action runat="install" undo="true" alias="addXsltExtension" assembly="Eksponent.CropUp.UmbracoIV" type="Eksponent.CropUp.Umbraco.Xslt.XsltHelpers" extensionAlias="Eksponent.CropUp" />
        <Action runat="install" undo="true" alias="CropUp_AddHttpModule" />
	</Actions>
</umbPackage>